<template>
  <view>
    <view class="bottom-fixed menu flex-around">
      <view v-for="item of storeMenu" :key="item.id"
            :class="{'active-menu':item.id === shopParams.activeMenu}"
            @click="changeTab(item.id)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {storeMenu} from "@/util/options/system";
import {useShopParamsStore} from "@/store/shop";
import {storeToRefs} from 'pinia'
import {toPath} from "@/util/router/router";


const shopStore = useShopParamsStore()
const {shopParams} = storeToRefs(shopStore) // 只解构响应式状态

const changeTab = (id) => {
  if (id === 3) {
    toPath('#')
    return
  }
  shopStore.updateShopParams({activeMenu: id})
}

</script>

<style scoped lang="scss">
@import "~@/static/css/index.css";

.menu {
  bottom: 30rpx !important;
  background: #fff;
  box-shadow: 0 0 20rpx #e8e8e8;
  position: fixed;
  border-radius: 100rpx;
  width: 90%;
  left: 5%;
  z-index: 1000;
  box-sizing: border-box;

  .active-menu {
    color: #fd4b03;
  }
}
</style>